import { ProFormDigit, ProFormItem, ProFormRadio, ProFormDependency } from '@ant-design/pro-form';
import { Segmented } from 'antd';
import { values } from 'lodash';
import { useDispatch } from 'umi';
import { useState, useRef, useEffect } from 'react';

import WrapperForm from '../../wrapperForm';
import FormJumpPage from '../../../costomFields/formJumpPage';
import ImageRadio from '../../../costomFields/imageRadio';
import { rules, TPL_TYPE, BOR_STYLE, SIZE_SET, eunmMaxLength, eunmGoodsData } from '..';

import type { ImageValue } from '..';
import type { Rule } from 'antd/lib/form';

import styles from './index.less';

interface IImageFormProps {
  data: ImageValue;
}

const ImageForm: React.FunctionComponent<IImageFormProps> = (props) => {
  const dispatch = useDispatch();
  const wrapRef = useRef<any>(); //实例 WrapperForm，修改绑定的表单数据，父组件用子组件方法
  const [formRef, setFormRef] = useState<any>();

  useEffect(() => {
    if (wrapRef.current) {
      setFormRef(wrapRef.current.formRef);
    }
  }, [wrapRef.current]);

  // 通过隐藏图片，数据为空导致校验没法通过；
  // 校验没办法通过--改变模式的时候 自动设置图片数量；
  const handleTplType = (e?: { label: string; value: string; image: string }) => {
    formRef.setFieldValue('imagesData', eunmGoodsData[e?.value || 'normal']);
    dispatch({
      type: 'decoration/updateData',
      payload: { imagesData: eunmGoodsData[e?.value || 'normal'] },
    });
  };

  const getTipsText = () => {
    const tplTypeBro = props.data.tplType;
    const sizeSettingBro = props.data.sizeSetting;

    let widthText = 750;
    let heightText = 750;
    if ([TPL_TYPE.carousel.value, TPL_TYPE.normal.value].includes(tplTypeBro)) {
      if (sizeSettingBro === SIZE_SET.bigImg.value) {
        widthText = 750;
        heightText = 750;
      }
      if (sizeSettingBro === SIZE_SET.smallImg.value) {
        widthText = 750;
        heightText = 270;
      }
    }
    if (tplTypeBro === TPL_TYPE.twoLine.value) {
      widthText = 340;
      heightText = 340;
    }
    if (tplTypeBro === TPL_TYPE.threeLine.value) {
      widthText = 220;
      heightText = 220;
    }

    if (tplTypeBro === TPL_TYPE.group.value) {
      return `请上传左图340x340px,右图340x160px,支持jpg/png格式,大小不超过10MB`;
    }
    return `图片请上传宽度${widthText}px,高度${heightText}px,支持jpg/png格式,大小不超过10MB`;
  };

  return (
    // @ts-ignore
    <WrapperForm<ImageValue> ref={wrapRef} reducerName="updateData" {...props}>
      <ProFormItem label="选择模板" name="tplType" required rules={rules.tplType as Rule[]}>
        <ImageRadio passRadio={handleTplType} options={values(TPL_TYPE)} />
      </ProFormItem>

      <ProFormDependency name={['tplType']}>
        {({ tplType }) =>
          [TPL_TYPE.carousel.value, TPL_TYPE.normal.value].includes(tplType) ? (
            <ProFormItem
              label="边距设置"
              name="borderStyle"
              required
              className={styles['segment-father']}
            >
              <Segmented options={values(BOR_STYLE)} />
            </ProFormItem>
          ) : null
        }
      </ProFormDependency>

      <ProFormDependency name={['tplType', 'borderStyle']}>
        {({ tplType, borderStyle }) =>
          ([TPL_TYPE.carousel.value, TPL_TYPE.normal.value].includes(tplType) &&
            borderStyle === BOR_STYLE.whithBorder.value) ||
          ![TPL_TYPE.carousel.value, TPL_TYPE.normal.value].includes(tplType) ? (
            <ProFormDigit width={120} label="图片圆角" name="imgRadius" required />
          ) : null
        }
      </ProFormDependency>

      <ProFormDependency name={['tplType']}>
        {({ tplType }) =>
          [TPL_TYPE.carousel.value, TPL_TYPE.normal.value].includes(tplType) ? (
            <ProFormRadio.Group
              label="尺寸设置"
              name="sizeSetting"
              options={values(SIZE_SET)}
              required
            />
          ) : null
        }
      </ProFormDependency>

      <div className={styles['tip-wrap']}>
        <ProFormItem
          label={
            <div>
              添加图片
              <div className={styles['tip-img']}>{getTipsText()} </div>
            </div>
          }
          name={undefined}
        />
      </div>

      <ProFormDependency name={['tplType', 'imagesData']}>
        {({ tplType, imagesData }) => (
          <FormJumpPage
            isShowBtn={tplType === TPL_TYPE.carousel.value ? true : false}
            isShowTitle={false}
            isShowLabel={false}
            maxLength={eunmMaxLength[tplType]}
            curListLength={imagesData.length}
            name="imagesData"
            label={'添加图片'}
          />
        )}
      </ProFormDependency>

      <ProFormItem
        label={null}
        name="imagesData"
        rules={[{ required: true, message: '请添加图片!' }]}
      />
    </WrapperForm>
  );
};

export default ImageForm;
